<template>
  <div id="app">
    <p>普通按钮</p>
    <div class="row">
      <my-button @click="testClick">默认按钮</my-button>
      <my-button type="primary">按钮1</my-button>
      <my-button type="success">按钮2</my-button>
      <my-button type="info">按钮3</my-button>
      <my-button type="warning">按钮4</my-button>
      <my-button type="danger">按钮5</my-button>
    </div>
    <p>朴素按钮</p>
    <div class="row">
      <my-button plain>默认按钮</my-button>
      <my-button plain type="primary">按钮1</my-button>
      <my-button plain type="success">按钮2</my-button>
      <my-button plain type="info">按钮3</my-button>
      <my-button plain type="warning">按钮4</my-button>
      <my-button plain type="danger">按钮5</my-button>
    </div>
    <p>round属性</p>
    <div class="row">
      <my-button round>默认按钮</my-button>
      <my-button round type="primary">按钮1</my-button>
      <my-button round type="success">按钮2</my-button>
      <my-button round type="info">按钮3</my-button>
      <my-button round type="warning">按钮4</my-button>
      <my-button round type="danger" icon="my-icon-message">按钮5</my-button>
    </div>
    <p>circle属性</p>
    <div class="row">
      <my-button circle icon="my-icon-message"></my-button>
      <my-button circle type="primary" icon="my-icon-message"></my-button>
      <my-button circle type="success" icon="my-icon-message"></my-button>
      <my-button circle type="info" icon="my-icon-message"></my-button>
      <my-button circle type="warning" icon="my-icon-message"></my-button>
      <my-button circle type="danger" icon="my-icon-message"></my-button>
    </div>
    <p>disabled属性</p>
    <div class="row">
      <my-button disabled icon="my-icon-message">按钮禁用</my-button>
      <my-button disabled type="primary" icon="my-icon-message">按钮禁用</my-button>
      <my-button disabled type="success" icon="my-icon-message">按钮禁用</my-button>
      <my-button disabled type="info" icon="my-icon-message">按钮禁用</my-button>
      <my-button disabled type="warning" icon="my-icon-message">按钮禁用</my-button>
      <my-button disabled type="danger" icon="my-icon-message">按钮禁用</my-button>
    </div>


    <p>Dialog</p>
    <my-button type="primary" @click="dialog_show=true"> 显示Dialog </my-button>
    <div class="row">
      <my-dialog title="温馨提示" :visibled.sync="dialog_show">
          111111111111111111111111111111111
          <span slot='footer'>
            <my-button @click="dialog_show=false"> 取 消 </my-button>
            <my-button type="primary" @click="dialog_show=false"> 确 定 </my-button>
          </span>
      </my-dialog>
    </div>

    <p>Dialog</p>
   
    <div class="row">
      <my-input placeholder="请输入用户名" type="password" disabled name='test'></my-input>
      <my-input placeholder="请输入用户名" name='test' v-model="inputVal"></my-input>
      <my-input placeholder="请输入用户名" name='test' v-model="inputVal" clearable></my-input>
      <my-input placeholder="请输入用户名" name='test' v-model="inputVal" show-password></my-input>
    </div>
    
    <p>switch开关</p>
    <div class="row">
      默认：<my-switch v-model="switchChecked"></my-switch>
      自定义颜色：<my-switch v-model="switchChecked1" activity-color="green" inactivity-color="red"></my-switch>
    </div>

    <p>单选框组件</p>
    <div class="row">
      <my-radio label="1" name="gender" v-model="gender">男</my-radio>
      <my-radio label="2" name="gender" v-model="gender">女</my-radio>
    </div>

    <p>单选框组分组组件</p>
    <div class="row">
      <my-radio-group v-model="married" @change="radioGroupChange">
        <my-radio label="1" name="married" >已婚</my-radio>
        <my-radio label="2" name="married" >未婚</my-radio>
      </my-radio-group>
    </div>

    <p>多选框组件</p>
    <div class="row">
      <my-checkbox-group v-model="checkbox">
        <my-checkbox  name="hobby" label="吃饭"></my-checkbox>
        <my-checkbox  name="hobby" label="睡觉"></my-checkbox>
        <my-checkbox  name="hobby" label="打豆豆"></my-checkbox>
      </my-checkbox-group>

      <my-checkbox v-model="singleCheck">是否选中</my-checkbox>

    </div>

    <p>表单组件</p>
    <div class="row">
        <my-form :model="formData" label-with="80px">
          <my-form-item label="用户名：">
            <my-input placeholder="请输入用户名" v-model="formData.username"></my-input>
          </my-form-item>
          <my-form-item label="选择：">
            <my-switch v-model="formData.switch"></my-switch>
          </my-form-item>
        </my-form>
    </div>

  </div>

  
  
</template>

<script>

export default {
  data(){
    return {
      dialog_show:false,
      inputVal:'input value',
      switchChecked:false,
      switchChecked1:false,
      gender:1,
      married:1,
      singleCheck:false,
      checkbox:['吃饭','睡觉','打豆豆'],
      formData:{
        username:'',
        switch:false
      } 
    }
  },
  methods:{
    testClick(e){
      console.log(e)
    },
    radioGroupChange(e){
      console.log(e)
    }
  }
}
</script>

<style lang="scss" scoped>
.row{margin:20px 0;}
  .my-button{
    margin: 0 10px;
  }
</style>
